<template>
	<view>
		<!-- 这里是状态栏 -->
		<view class="status_bar">
		</view>
		<!-- 顶部导航栏 -->
		<view>
			<u-navbar title="模型详情" height="120rpx" leftText="返回" @leftClick="gotoBack" :autoBack="true">
			</u-navbar>
		</view>
		<!-- <image src="/static/logo.png"></image> -->
		<view>
			<canvas type="webgl" id="webgl" style="width: 100vw; height: 80vh" @touchstart="touchStart"
				@touchmove="touchMove" @touchend="touchEnd"></canvas>
		</view>
	</view>
</template>

<script>
	import * as THREE from '@/common/three-platformize/build/three.module.js';
	import {
		WechatPlatform
	} from '@/common/three-platformize/src/WechatPlatform';
	import {
		OrbitControls
	} from '@/common/three-platformize/examples/jsm/controls/OrbitControls.js'
	import {
		GLTFLoader
	} from '@/common/three-platformize/examples/jsm/loaders/GLTFLoader.js'
	import {
		RoomEnvironment
	} from '@/common/three-platformize/examples/jsm/environments/RoomEnvironment.js';

	export default {
		data() {
			return {
				camera: null, // 照相机
				scene: null, // 场景
				renderer: null, // 渲染器
				controls: null, // 控制器
				container: null, // 画布容器
				model: null, // 当前模型
			}
		},
		mounted() {
			wx.createSelectorQuery()
				.select('#webgl')
				.node()
				.exec((res) => {
					console.log(THREE);
					this.canvas = res[0].node
					//设置平台
					const platform = new WechatPlatform(this.canvas);
					platform.enableDeviceOrientation('game'); // 开启DeviceOrientation
					THREE.PLATFORM.set(platform);
					this.platform = platform;

					this.init();
				})
		},
		methods: {
			init() {
				this.scene = new THREE.Scene();


				// 给场景加个地板
				let floorGeometry = new THREE.PlaneGeometry(5000, 5000, 1, 1);
				let floorMaterial = new THREE.MeshPhongMaterial({
					color: 0xeeeeee,
					shininess: 0,
				});
				let floor = new THREE.Mesh(floorGeometry, floorMaterial);
				floor.rotation.x = -0.5 * Math.PI;
				floor.receiveShadow = true;
				floor.position.y = -1;
				this.scene.add(floor);

				this.camera = new THREE.PerspectiveCamera(45, this.canvas.width / this.canvas.height, 0.25, 100);
				this.camera.position.set(-5, 3, 10);
				this.camera.lookAt(new THREE.Vector3(0, 2, 0));


				//设置光线
				// var light = new THREE.HemisphereLight(0xffffff, 0x444444);
				// light.position.set(0, 20, 0);
				// this.scene.add(light);
				// light = new THREE.DirectionalLight(0xffffff);
				// light.position.set(0, 20, 10);
				// this.scene.add(light);


				//加载外部模型
				var loader = new GLTFLoader();
				let that = this
				let progress = 0
				loader.load('https://wbfighting.cn/model/fan2.glb', function(gltf) {
					that.model = gltf.scene;
					that.scene.add(that.model);
					that.model.traverse((obj) => {
						if (obj.isMesh) {
							console.log("默认材质：", obj.name)
						}
					})
				}, function(xhr) {
					progress = Math.round((xhr.loaded / xhr.total) * 100);
					console.log(progress);
				});

				// var geometry = new THREE.BoxGeometry(2, 2, 2);
				// var material = new THREE.MeshBasicMaterial({
				// 	color: 0xed3ed3
				// });
				// //组合成一个粉色的立方体
				// var cube = new THREE.Mesh(geometry, material);
				// //添加进场景
				// this.scene.add(cube);

				this.renderer = new THREE.WebGLRenderer({
					antialias: true,
					canvas: this.canvas
				});
				this.renderer.setPixelRatio(wx.getSystemInfoSync().pixelRatio);
				this.renderer.setSize(this.canvas.width, this.canvas.height);
				this.renderer.setClearColor(0xb9d3ff, 0.4);
				this.renderer.outputEncoding = THREE.sRGBEncoding;

				const environment = new RoomEnvironment();
				const pmremGenerator = new THREE.PMREMGenerator(this.renderer);
				this.scene.environment = pmremGenerator.fromScene(environment).texture;
				environment.dispose();


				this.controls = new OrbitControls(this.camera, this.renderer.domElement);
				this.camera.position.set(5, 5, 10);
				this.controls.update();

				this.animate();

			},

			animate() {
				this.controls && this.controls.update();
				this.renderer.render(this.scene, this.camera);
				this.canvas.requestAnimationFrame(this.animate);
			},
			gotoBack() {
				uni.switchTab({
					url: '/pages/home/home'
				});
			},
			touchStart(e) {
				console.log("111");
				this.platform.dispatchTouchEvent(e);
			},
			touchMove(e) {
				console.log("222");
				this.platform.dispatchTouchEvent(e);
			},
			touchEnd(e) {
				console.log("333");
				this.platform.dispatchTouchEvent(e);
			}
		}
	}
</script>

<style>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
</style>